<script setup lang="ts">
import html2canvas from 'html2canvas'
import DictTag from '@/components/DictTag/index.vue'
import { useDict } from '@/utils/dict'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import { parseTime } from '@/utils/ruoyi'
import exportPDF from '@/utils/exportPDF'

defineProps<
    {
      student?:
      Student &
      StudentScoreInfo &
      {
        familyMembers?: StudentFamilyInfo[]
        educationalExperience?: StudentEducationInfo[]

      }

    }
>()

async function handleExport() {
  const promise = Promise.all([
    html2canvas(document.getElementById('page1')!, { logging: false, scale: window.devicePixelRatio * 3 }),
    html2canvas(document.getElementById('page2')!, { logging: false, scale: window.devicePixelRatio * 3 }),
  ])
  exportPDF(await promise, 'p', 'cm', [21.0, 29.7])
}
defineExpose({ onExport: handleExport })

const {
  sys_user_sex,
  student_nation,
  student_political,
  heath,
} = useDict(
  'sys_user_sex',
  'student_nation',
  'student_political',
  'heath', // 去掉空格
)
</script>

<template>
  <div id="page1" class="pdf-page">
    <h1 class="gz">
      <span>贵州省家庭经济困难学生认定申请承诺书</span>
    </h1>
    <div class="header_top">
      <span>学校：<span class="highlight">贵阳人文科技学院</span>
        学院：<span class="highlight">{{ student?.studentCollege }}</span>
        专业：<span class="highlight">{{ student?.studentMajor }}</span>
        年级：<span class="highlight">{{ student?.studentGrade }}级</span>
        班级：<span class="highlight">{{ student?.studentClass }}</span></span>
    </div>
    <div class="pdf-col" style="padding-right: 1.5em">
      <div class="word-table page1">
        <div class="side_content">
          <span>基本情况</span>
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '学生姓名'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content name-empty">
          {{ student?.studentName }}
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '性别'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          <DictTag :options="sys_user_sex" :value="student?.sex" type="text" />
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '出生年月'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content birthday-empty">
          {{ parseTime(student?.birthday || '', '{y}年{m}月') }}
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '籍贯'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content people-empty">
          {{ student?.nativePlace }}
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '身份证号'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-4 table-la1">
          {{ student?.studentIdCard }}
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '家庭人口'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content">
          <DictTag :options="student_nation" :value="student?.studentNation" type="text" />
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '手机号码'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content phone-empty">
          {{ student?.phonenumber }}
        </div>
        <div class="side_content2">
          <span>家庭通讯信息</span>
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '详细通讯地址'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-15 address-empty">
          {{ student?.nowAddress }}
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '邮政编码'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-4 ">
          {{ student?.studentExamCode }}
        </div>

        <div class="table-label parents-number family-phone">
          <span v-for="(i, index) in '家长手机号码'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content parents-number-empty">
          {{ student?.parentTel1 }}
        </div>
        <div class="side_content3">
          <span v-for="(i, index) in '家庭成员情况'" :key="index">{{ i }}</span>
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '姓名'" :key="index">{{ i }}</span>
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '年龄'" :key="index">{{ i }}</span>
        </div>
        <div class="table-label ralation-student">
          <span v-for="(i, index) in '与学生的关系'" :key="index">{{ i }}</span>
        </div>
        <div class="table-label work-space">
          <span v-for="(i, index) in '工作（学习）单位'" :key="index">{{ i }}</span>
        </div>
        <div class="table-label ">
          <span v-for="(i, index) in '职业'" :key="index">{{ i }}</span>
        </div>
        <div class="table-label incom-year">
          <span v-for="(i, index) in '年收入（元）'" :key="index">{{ i }}</span>
        </div>
        <div class="table-label fitness-situation">
          <span v-for="(i, index) in '健康状况'" :key="index">{{ i }}</span>
        </div>
        <template v-for="(_, index) in new Array(6)" :key="student?.familyMembers.at(index)?.id || index">
          <div class="table-content">
            {{ student?.familyMembers?.at(index)?.name }}
          </div>
          <div class="table-content">
            {{ student?.familyMembers?.at(index)?.id }}
          </div>
          <div class="table-content ralation-student">
            {{ student?.familyMembers?.at(index)?.relationship }}
          </div>
          <div class="table-content work-space">
            {{ student?.familyMembers?.at(index)?.unitAndPosition }}
          </div>
          <div class="table-content">
            {{ student?.familyMembers?.at(index)?.unitAndPosition }}
          </div>
          <div class="table-content table-col-2">
            {{ student?.familyMembers?.at(index)?.tel }}
          </div>
          <div class="table-content fitness-situation">
            {{ student?.familyMembers?.at(index)?.heath }}
          </div>
        </template>
        <div class="side_content4">
          <span v-for="(i, index) in '特殊群体类型'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-16 table-row-3" style="font-family: 'NSimSun', '新宋体', serif;font-weight: normal;">
          <div class="container mt-4">
            <table class="table-custom">
              <tbody>
                <tr>
                  <table class="table-custom">
                    <tbody>
                      <tr>
                        <td><label for="option1"><input id="option1" type="checkbox">1. 脱贫家庭学生</label><br></td>
                        <td><label for="option2"><input id="option1" type="checkbox">2. 脱贫不稳定家庭学生</label><br></td>
                        <td><label for="option3"><input id="option1" type="checkbox">3. 最低生活保障家庭学生</label><br></td>
                      </tr>
                      <tr>
                        <td><label for="option4"><input id="option1" type="checkbox">4. 低保边缘人口</label><br></td>
                        <td><label for="option5"><input id="option1" type="checkbox">5. 特困供养学生</label><br></td>
                        <td><label for="option6"><input id="option1" type="checkbox">6. 孤儿</label><br></td>
                      </tr>
                      <tr>
                        <td><label for="option7"><input id="option1" type="checkbox">7. 事实无人抚养儿童</label><br></td>
                        <td><label for="option8"><input id="option1" type="checkbox">8. 烈士子女</label><br></td>
                        <td><label for="option9"><input id="option1" type="checkbox">9. 家庭经济困难残疾学生</label><br></td>
                      </tr>
                      <tr>
                        <td><label for="option10"><input id="option1" type="checkbox">10. 残疾人子女</label><br></td>
                        <td><label for="option11"><input id="option1" type="checkbox">11. 边缘易致贫家庭学生</label><br></td>
                      </tr>
                    </tbody>
                  </table>
                </tr>
                <tr>
                  <td>
                    <div class="option12">
                      <input id="option1" type="checkbox">12. 因病因灾因意外事故等刚性支出较大或收入大幅缩减导致基本生活出现严重困难家庭学生
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="side_content5">
          <span v-for="(i, index) in '影响家庭经济状况有关信息'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content table-col-16 table-row-4 beautiful-contents">
          <table>
            <tr>
              <td>家庭人均年收入：<span class="highlight1">4600</span>元。</td>
            </tr>
            <tr>
              <td>家庭遭受自然灾害情况：<span class="highlight1">*无*</span>。家庭遭受突发意外事件：<span class="highlight1">_无_</span>。</td>
            </tr>
            <tr>
              <td>家庭成员因残疾、年迈而劳动能力弱情况：<span class="highlight-red"> 父亲残疾，无劳动能力；祖母长年患病医疗开销较大。 </span></td>
            </tr>
            <tr>
              <td>家庭成员失业情况：<span class="highlight1">*无*</span>。家庭欠债情况：<span class="highlight1">10万元</span>。</td>
            </tr>
            <tr>
              <td>其他情况：<span class="highlight1">*无***************************************************************</span>。</td>
            </tr>
          </table>
        </div>
        <div class="side_content6">
          <span v-for="(i, index) in '个人承诺'" :key="index">{{ i }}</span>
        </div>
        <div class="table-col-8 table-row-3 com-cont">
          <span class="highlight-promise">承诺内容：</span>
        </div>
        <div class="table-col-3 table-row-3 pack">
          <span>学生本人（或监护人）签字</span>
        </div>
        <div class="table-col-4 table-row-3 com-cont" />
      </div>
    </div>
  </div>

  <br>
  <div id="page2" class="pdf-page2">
    <div class="pdf-col present-page page2 word-table">
      <div class="side_content7">
        <span v-for="(i, index) in '班级评议小组意见'" :key="index">{{ i }}</span>
      </div>
      <div class="major-border">
        <span class="special"><input type="checkbox">经评议及审查，本学年该同学符合以下家庭经济困难学生认定依据</span>
        <ul class="center-content">
          <li><label><input type="checkbox"> 脱贫家庭学生</label></li>
          <li><label><input type="checkbox"> 脱贫不稳定家庭学生</label></li>
          <li><label><input type="checkbox"> 低保低收入家庭学生</label></li>
          <li><label><input type="checkbox"> 低保边缘人口</label></li>
          <li><label><input type="checkbox"> 特困供养学生</label></li>
          <li><label><input type="checkbox"> 孤儿</label></li>
          <li><label><input type="checkbox"> 事实无人抚养儿童</label></li>
          <li><label><input type="checkbox"> 独子女</label></li>
          <li><label><input type="checkbox"> 家庭经济困难残疾孩子</label></li>
          <li><label><input type="checkbox"> 残疾人子女</label></li>
          <li><label><input type="checkbox"> 边缘易致贫家庭学生</label></li>
          <li class="student-select">
            <span><input type="checkbox">因病因灾因意外事故等刚性支出较大或收入大幅减少导致基本生活出现严重困难家庭学生</span>
          </li>
          <li><label><input type="checkbox"> 其他家庭经济困难学生</label></li>
          <li class="up-left">
            建议困难等级为：
          </li>
          <li class="unique">
            <label><input type="checkbox"> 特别困难</label>
            <label><input type="checkbox"> 困难</label>
            <label><input type="checkbox"> 一般困难</label>
          </li>
        </ul>

        <div class="sign-section">
          <input type="checkbox"> 经评议及审查，本学年该同学不符合家庭经济困难学生认定条件，建议不予认定。<br>
          <span class="left-move">
            评议小组组长签字：
          </span>
          <span class="bottom-move">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
        </div>
      </div>
      <div class="side_content8">
        <span class="end-border"> 院（系）学生资助工作组审核意见</span>
      </div>
      <div class="penultimate">
        <div class="first-1">
          <input type="checkbox">经审核，本学年该同学符合家庭经济困难学生认定条件，认定困难等级为：
        </div>
        <span class="checkbox-options">
          <label><input type="checkbox">特别困难;</label>
          <label><input type="checkbox">困难;</label>
          <label><input type="checkbox">一般困难</label>
        </span>
        <br>
        <div class="checkbox-line">
          <input type="checkbox">经审核，本学年该同学不符合家庭经济困难学生认定条件，决定不予认定，并告知学生本人（或监护人）
        </div>
        <div class="signature">
          <span>认定工作组组长签字：</span>
        </div>
        <div class="public-office">
          <span>(公章)</span>
        </div>
        <div class="datatime">
          <span class="date-line" /> 年 <span class="date-line" /> 月 <span class="date-line" /> 日
        </div>
      </div>
      <div class="side_content9">
        <span>学校意见</span>
      </div>
      <div class="bottom-border">
        <a class="first-1"><input type="checkbox">经复核，本学年该同学符合家庭经济困难学生认定条件，认定困难等级为：</a>
        <span class="checkbox-options">
          <label><input type="checkbox">特别困难;</label>
          <label><input type="checkbox">困难;</label>
          <label><input type="checkbox">一般困难</label>
        </span>
        <br>
        <div class="checkbox-line1">
          <input type="checkbox">经复核，本学年该同学不符合家庭经济困难学生认定条件，决定不予认定，并告知
          学生本人(或监护人)。
        </div>
        <div class="signature1">
          <span>负责人签字：</span>
        </div>
        <div class="public-office1">
          <span>(公章)</span>
        </div>
        <div class="datatime">
          <span class="date-line" /> 年 <span class="date-line" /> 月 <span class="date-line" /> 日
        </div>
      </div>
    </div>
    <div>
      注:
      <ol>
        <li>本表供家庭经济困难学生申请认定时填写,可双面复印;</li>
        <li>第1页由学生本人(或监护人)填写,第2页由学校填写;</li>
        <li>承诺内容需本人手工填写"<strong>"本人承诺以上所填写内容真实,如有虚假,愿承担相应责任"</strong></li>
        <li>原农村建档立卡家庭学生包括脱贫家庭学生及脱贫不稳定家庭学生</li>
      </ol>
    </div>
  </div>

</template>

<style scoped lang="scss">
@import "src/assets/styles/word-table";

@font-face {
  font-family: '新宋体';
  src: url("@/assets/fonts/新宋体.ttf"); // 确保路径正确
  font-weight: bold;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

.side_content, .side_content1, .side_content2, .side_content3, .side_content4,
.side_content5, .side_content6, .side_content7, .side_content8, .side_content9 {
  font-family: 'SimHei', sans-serif;
}
table, th, td, div {
  border-collapse: collapse;
}



label {
  font-weight: normal;
}

.adjust{
  font-size: 16pt;
  margin: 0 auto;
}

.gz {
  text-align: center;
  margin-bottom:50px;
  font-size: 36px;
  font-family: 'SimSun', '宋体', serif;
}

.header_top {
  text-align: center;
  font-size: 22px;
  margin-bottom:20px;
  font-family: 'SimHei', sans-serif;
}

.highlight {
  //color: transparent;
  text-decoration: underline;
  text-decoration-color: red;
}
.highlight1{
  color: transparent;
  text-decoration: underline;
  text-decoration-color: red;
}
.side_content {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  font-size: 16pt;
}
.name-empty{
  grid-column: 3/5 ;
}
.birthday-empty{
  grid-column: 8/11;
}
.people-empty{
  grid-column: 12/end;
}
.phone-empty{
  grid-column: 10/end;
}
.address-empty{
  grid-column: 3 /end;
  border-collapse:collapse;
}
.ralation-student{
  grid-column:4/6 ;
}
.work-space{
  grid-column: 6/10;
}
.incom-year{
  grid-column: 11/13;
}

.table-la1 {
  grid-column: 2;

}
.family-phone{
  grid-column:7/9 ;
}
.parents-number-empty{
  grid-column: 9/end;
}
.fitness-situation{
  grid-column: 13/end;
}

.side_content2 {
  grid-row: 3 / 5;
  grid-column: 1 / 2;
  font-size: 16pt;
}
.side_content3{
  grid-row: 5/12;
  grid-column: 1 / 2;
  display: flex;
  justify-content: center;
  align-content: center;
  font-size:16pt;
}
.side_content4{
  grid-row: 12/15;
  grid-column: 1 / 2;
  display: flex;
  justify-content: center;
  align-content: center;
  font-size:16pt;
}
.side_content5 {
  grid-column: 1 / 2;
  grid-row: 15 / 19;
  justify-content: center;
  align-content: center;
  font-size: 16pt;
  writing-mode: horizontal-tb; /* 修改文字方向为水平 */
  transform: rotate(0deg); /* 确保文字没有旋转 */
  text-align: center; /* 水平居中文字 */
}

.side_content6{
  grid-row: 19/22;
  justify-content: center;
  align-content: center;
  font-size:16pt;
}
.side_content7{
  grid-row: 1/4;
  justify-items: center;
  align-content: center;
  font-size:18pt;
}
.side_content8{
  grid-row: 4/5;
  align-content: center;
  font-size:18pt;
}
.side_content9{
  grid-row: 5/6;
  align-content: center;
  padding:25px;
  font-size:18pt;
}
.name-modify{
  text-decoration-color: white;
}
.modify-lite{
  margin-left: 10px;
}
.beautiful-contents table{
  width: 100%;
}
.beautiful-contents td{
  border: 1px solid white;
  padding: 6px;
  text-align: left;
  font-size: 16pt;
}
.highlight-red{
  color: transparent;
  text-decoration: underline;
  text-decoration-color: red;
}
.com-cont{
  display: flex;
  justify-content: flex-start!important;
  align-items: flex-start!important;
  font-size: 16pt;
}
.pack{
  font-size: 16pt;
}
.major-border{
  grid-row: 1/4;
  grid-column: 2/end;
  line-height:30px;
  font-size: 16pt;
}
.center-content{
  list-style: none;
  margin-left: 200px;
  text-align: center;
  margin-top: 0;
}
.center-content li{
  margin-top: 0;
}
.student-select{
  margin-right:33px ;
}
.special{
  margin-bottom: 0;
  display: inline-block;
}
.major-border li{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 使checkbox小方框向左对齐 */
}
li.up-left{
  margin-right: 200px;
  justify-content: flex-end;
}
li.unique{
  justify-content: flex-end;
}

label {
  display: flex;
  align-items: center;
}

input[type="checkbox"] {
  margin-right: 10px;
  opacity: 0.8;
}
.sign-section{
  margin-left: 90px;
}
.left-move{
  font-size: 18px;
  margin-right: 520px;
}
.bottom-move{
  font-size: 16pt;
  display: flex;
  justify-content: flex-end;
  align-items: end;
  margin-right: 120px;
  margin-top: 50px;
}
.penultimate{
  grid-row: 4/5;
  grid-column: 2/end;
}
.end-border{
  display: flex;
  align-items: center;
  justify-content: center;
}
.first-1{
  font-size: 16pt;
  margin-top: 60px;
  margin-right: 120px;
}
.checkbox-options{
  display:flex;
  margin-left: 520px;
  margin-top: 20px;

}
.checkbox-line{
  margin-top: 20px;
  margin-right: 40px;
  font-size: 16pt;
}
.checkbox-line1{
  margin-top: 20px;
  margin-right: 40px;
  font-size: 16pt;
}
.signature{
  font-size: 16pt;
  margin-bottom:40px;
  margin-top:20px;
  margin-right: 350px;
}
.public-office{
  font-size: 16pt;
  margin-right:135px;
  margin-top: 50px;
}
.signature1{
  font-size: 16pt;
  margin-bottom:40px;
}
.public-office1{
  font-size: 16pt;
  margin-left: 300px;
  margin-top: 50px;
}
.datatime{
  letter-spacing: 20px;
  font-size: 18pt;
  margin-left: 450px;
}
.bottom-border{
  grid-row: 5/6;
  grid-column: 2/end;
}

.pdf-page {
  width:29.3cm;
  height:auto;
  background: white;
  padding: 0 1cm 1cm 1cm;
  display: grid;
  margin: 0 auto;
  font-size: 16pt;
  font-weight: normal;

  .pdf-col {
    height: 100%;

    //&:first-child {
    //  padding-right: 2.6cm;
    //}
    //&:last-child {
    //  padding-left: 2.6cm;
    //}
  }
}
.pdf-page2{
  width: 27cm;
  height: auto;
  background: white;
  padding: 1cm 1cm 1cm 1cm;
  display: grid;
  margin:0 auto;

  .pdf-col {
    height: 100%;

    //&:first-child {
    //  padding-right: 2.6cm;
    //}
    //&:last-child {
    //  padding-left: 2.6cm;
    //}
  }
}

.present-page p {
  font-size: 16pt;
  text-indent: 2em;
  font-family: '仿宋_GB2312', serif;
  line-height: normal;
  text-align: justify;
}

.cover-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  font-size: 18pt;

  main {
    padding-bottom: 4em;

    .cover-col {
      font-family: '仿宋_GB2312', serif;
      display: flex;
      margin: 1em 0;

      div {
        &:first-child {
          font-size: 18pt;
        }
        &:last-child {
          width: 12em;
          margin-left: 0.5em;
          border-bottom: 1px solid black;
          text-align: center;
        }
      }
    }
  }

  footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;

    .date {
      font-size: 18pt;
      font-family: '仿宋_GB2312', serif;
      padding-bottom: 1em;
    }

    span {
      padding-bottom: 2em;
    }
  }
}

.page1 {
  display: grid;
  grid-template-columns: 1fr 2fr repeat(14, 1fr); /* 将第二列的宽度设为2fr */
  grid-template-rows: repeat(21, 1fr); // 确保行数和布局一致

  & > * {
    //border: 1px solid black; // 确保所有单元格有边框
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .table-label {
    justify-content: center;
    text-align: center;
  }
}
.page2{
  display: grid;
  grid-template-columns:repeat(8,1fr) ;
  grid-template-rows: repeat(5, auto); // 确保行数和布局一致

  //& > * {
  //  border: 1px solid black; // 确保所有单元格有边框
  //}

  .table-label {
    justify-content: center;
    text-align: center;
  }
}

.table-custom {
  border-collapse: collapse;
  width: 100%;
}
.table-custom th, .table-custom td {
  border: none;
  padding: 8px;
  line-height: 5px;
}
.table-custom th {
  background-color: #f2f2f2;
}
.option12{
  margin-right: 148px;
}

@media print {
  body {
    width: 21cm;
    height: 29.7cm;
    overflow: hidden;
  }
  .pdf-page{
    width: 21cm; /* 确保打印时页面宽度一致 */
    height: auto;
    margin: 0;
    padding: 0;
    page-break-inside: avoid;
  }
}
</style>
